<template>
  <page-layout>
    <a-card>
      <a-steps :current="current">
        <a-step v-for="step in steps" :key="step.title" :title="step.title"/>
      </a-steps>
      <div class="mt-20">
        <baseInfoForm ref="baseInfoFormRef" v-if="Number(current) === 0"/>
        <transferInfoForm ref="transferInfoFormRef" v-if="Number(current) === 1"/>
        <otherInfoForm ref="otherInfoRef" v-if="Number(current) === 2"/>
      </div>
      <div class="box-ver-hor-center">
        <a-button type="primary" @click="saveForm" v-if="current === steps.length - 1">{{ t('button.save') }}</a-button>
        <a-button type="primary" @click="nextStep" v-else>{{ t('button.next') }}</a-button>
      </div>
    </a-card>
  </page-layout>
</template>

<script>
import baseInfoForm from './components/base-info-form'
import transferInfoForm from './components/transfer-info-form'
import otherInfoForm from './components/other-info-form'
import { isEmpty } from '@/tools/common'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { save, update, selectById } from '@/api/module/school'
import { message } from 'ant-design-vue'

export default {
  name: 'college-manage-add',
  components: {
    baseInfoForm,
    transferInfoForm,
    otherInfoForm,
  },
  setup() {
    const baseInfoFormRef = ref(null)
    const transferInfoFormRef = ref(null)
    const otherInfoRef = ref(null)
    const current = ref(0)
    const router = useRouter()
    const route = useRoute()
    const { t } = useI18n()

    const steps = [
      { title: '填写基础信息', content: 'First-content' },
      { title: '填写转学信息', content: 'Second-content' },
      { title: '填写其他信息', content: 'Last-content' }
    ]

    const submitData = reactive({})

    const editData = reactive({
      data: {}
    })

    const nextStep = async () => {
      if (current.value === 0) {
        submitData.baseInfo = await baseInfoFormRef.value.submit()
      }
      if (current.value === 1) {
        submitData.transferInfo = await transferInfoFormRef.value.submit()
      }
      current.value++

      const isEdit = !isEmpty(route.query.id)

      if (isEdit) {
        await nextTick(() => {
          switch (current.value) {
            case 1:
              transferInfoFormRef.value.updateFormData(editData.data)
              break;
            case 2:
              otherInfoRef.value.updateFormData(editData.data)
              break;
          }
        })
      }
    }

    const saveForm = async () => {
      submitData.otherInfo = await otherInfoRef.value.submit()

      let response, ajaxData = {
        ...submitData.baseInfo,
        ...submitData.transferInfo,
        ...submitData.otherInfo,
      }

      isEmpty(route.query.id)
        ? response = await save(ajaxData)
        : response = await update({ ...ajaxData, id: route.query.id })

      if (Number(response.code) === 500) return message.error('操作失败')

      message.success({
        content: '操作成功',
        onClose() {
          router.push('/university/college-manage')
        }
      })
    }

    onMounted(async () => {
      if (!isEmpty(route.query.id)) {
        const response = await selectById({ id: route.query.id })
        if (response.code === 500) return message.error('获取数据失败,请关闭tab重新打开')
        baseInfoFormRef.value.updateFormData(response.data)
        editData.data = response.data
        console.log(response.data, 'response')
      }
    })

    return {
      baseInfoFormRef,
      transferInfoFormRef,
      otherInfoRef,
      current,
      t,
      steps,
      submitData,
      nextStep,
      saveForm
    }
  }

}
</script>
